搭建开发环境

作者：陈广
日期：2018-4-10

TypeScript的设计师：Anders Hejlsberg，世界上最伟大的设计师、架构师、程序员。他是 Delphi/C# 之父，这两个语言我都学过，现在又要多一个 TypeScript 之父名头了。突然发现，我一生都在追随 Anders，呵呵。

TypeScript 简介

TypeScript 的特点

TypeScript 是微软推出的开源语言，使用 Apache 授权协议，
TypeScript 是 JavaScript 的超集。
TypeScript 增加了可选类型、类和模块
TypeScript 可编译成可读的、标准的 JavaScript
TypeScript 支持开发大规模 JavaScript 应用
TypeScript 设计用于开发大型应用，并保证编译后的 JavaScript 代码兼容性
TypeScript 扩展了 JavaScript 的语法，因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改
TypeScript 文件扩展名是 ts，而 TypeScript 编译器会编译成 js 文件
TypeScript 易学易于理解

TypeScript语法特性

兼容 ECMAScript 2015（ES6）规范，可选择编译成ES6或ES5规范的JavaScript代码（ECMAScript 3及以上版本）；
面向对象，并拥有一些函数式特性；
类型语言；
实现了注解、泛型等特性；
适配大型App构建。
类 Classes
接口 Interfaces
模块 Modules
类型注解 Type annotations
编译时类型检查 Compile time type checking
Arrow 函数 (类似 C# 的 Lambda 表达式)

TypeScrip与JavaScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

开发环境的安装

开发工具首选 Visual Studio Code，安装过程略过。

接下来是安装 Node.js，可去Node.js官网下载并安装，安装过程略。

安装 TypeScript Complier

使用以下命令安装 TypeScript 编译器：

npm install -g typescript

可以使用以下命令更新编译器：

npm update -g typescript

查看版本：

tsc -v

安装 Typings

typings 主要是用来获取.d.ts文件。当typescript使用一个外部JavaScript库时,会需要这个文件，当然好多的编译器都用它来增加智能感知能力。

使用以下命令：

npm install -g typings

安装 node 的 .d.ts 库，使用以下命令：

typings install dt~node –global

创建一个新项目

首先在硬盘建立一个文件夹ts_app。然后在此文件夹上鼠标点右键，选中Open with Code，用 vscode 打开此文件夹。

在 vscode 中使用**Ctrl + ~**快捷键打开终端，并输入如下命令：

npm init

一路回车，最后按 y 键创建 package.json 文件。如下图所示：

配置 tsconfig.json

接下来输入如下命令生成 tsconfig.json 文件：

tsc --init

下面介绍几个 tsconfig.json 文件中的配置选项：

target：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015。
noImplicitAny：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。
module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es6。
removeComments：编译生成的JavaScript文件是否移除注释。
sourceMap：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。
outDir：编译输出JavaScript文件存放的文件夹。
include、exclude：编译时需要包含/剔除的文件夹。

新建一个 greeter.ts 文件

class Student {
    firstName : string;
    lastName : string;

    constructor(fiestName : string,  lastName : string) {
        this.firstName = fiestName;
        this.lastName = lastName;
    }

    greeter() {
        return "Hello，您好" + this.firstName + " " + this.lastName;
    }
}

var user = new Student("王", "小明");

document.body.innerHTML = user.greeter();

编译文件

使用 Ctrl + Shift + B 快捷键启动编译，我们看到左侧资源管理器出现了 greeter.js 文件，这是.ts文件编译后生成的.js文件。

新建一个 index.html 文件

输入如下代码：

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8"/>
            <title>greeter</title>
    </head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

运行并监视程序

按下 Ctrl + Shift + B 快捷键，在上方弹出下拉菜单中选择tsc:监视 - tsconfig.json。此时会启动一个web服务器并监视文件改动。

打开浏览器，输入URL：http://localhost:8080/index.html。程序运行效果如下图所示：

接下来更改 greeter.ts 文件里的以下这句代码里的内容

var user = new Student("王", "小明");

比如把小明改为小李，然后保存，此时观察浏览器，发现浏览的内容在保存的同时也进行了改变。现在可以很方便地写ts代码了。vscode 会自动监视代码改变，每次文件保存，都会自动将ts编译为js并刷新浏览器，让用户可以实时观察程序修改的结果。